import React,{useState} from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import {
  DesktopOutlined,
  PieChartOutlined,
  ContainerOutlined,
  MailOutlined,
  AppstoreOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu} from 'antd';

const { Header, Content, Footer, Sider } = Layout;


export default function Home() {
  const [collapsed, setCollapsed] = useState(false); 
  
  type MenuItem = Required<MenuProps>['items'][number]; 
  const items: MenuItem[] = [
  { key: '/home/dashboard', icon: <PieChartOutlined />, label: '首页' },
  { key: '/home/category', icon: <DesktopOutlined />, label: '分类管理' },
  { key: '/home/banner', icon: <ContainerOutlined />, label: 'Banner管理' },
  {
    key: 'sub1',
    label: '课堂管理',
    icon: <MailOutlined />,
    children: [
      { key: '5', label: 'Option 5' },
      { key: '6', label: 'Option 6' },
      { key: '7', label: 'Option 7' },
      { key: '8', label: 'Option 8' },
    ],
  },
  {
    key: 'sub2',
    label: '学校数据',
    icon: <AppstoreOutlined />,
    children: [
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
      {
        key: 'sub3',
        label: 'Submenu',
        children: [
          { key: '11', label: 'Option 11' },
          { key: '12', label: 'Option 12' },
        ],
      },
    ],
  },
  {
    key: '/home/rbac',
    label: '权限管理',
    icon: <AppstoreOutlined />,
    children: [
      { key: '/home/rbac/user', label: '用户管理' },
      { key: '/home/rbac/role', label: '角色管理' },
      { key: '/home/rbac/menu', label: '菜单管理' },
    ],
  },
];
  const router=useNavigate();
  const menuClick=(ev)=>{
    //console.log(ev)
    router(ev.key)
  };

  return (
      <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed}
       onCollapse={(value) => setCollapsed(value)}> 
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']}
         mode="inline" items={items} 
         onClick={menuClick}
         defaultOpenKeys={["/home/rbac"]}/>
      </Sider>
      <Layout>
        <Header style={{ padding: 0,}} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
          <div
            style={{
              padding: 24,
              minHeight: 360,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}
